<!DOCTYPE html>
<html>
  <head>
		<style>
			ul {
				float:left;
				width:100%;
				padding:0;
				margin:0;
				list-style-type:none;
			}
			a {
				float:left;
				width:6em;
				text-decoration:none;
				color:white;
				background-color:purple;
				padding:0.2em 0.6em;
				border-right:1px solid white;
				text-align:center;
				text-transform:uppercase;
			}
			a:hover { background-color:#ff3300; }
			li { display:inline; }
		</style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
  
  </body>
</html>